<template>
  <div class="blog-wrapper">
    <LCR>
      <panel>
        <h1>{{ state.title }}</h1>
        <div class="userinfo-bar">
          <div class="item">
            <avatar size="mini" :src="state.user.avatar"></avatar>
            <span>{{ state.user.nickName }}</span>
          </div>

          <div class="item">
            <el-icon><Edit /></el-icon>发布于{{ formatDate(state.createTime) }}
          </div>

          <div class="item">
            <el-icon><RefreshRight /></el-icon>更新于{{ formatDate(state.updateTime) }}
          </div>
          <div class="item cursor">
            <el-icon :size="16" :title="`点赞数${state.likeCount}`"><Pointer /></el-icon>
            {{ state.likeCount }}
          </div>
        </div>
        <el-divider />
        <div v-html="state.content"></div>
      </panel>
      <!-- <panel>
        <div class="option-bar">
          <div class="option"></div>
          <div class="option">
            <el-icon :size="20" title="收藏"><Star /></el-icon>
          </div>
        </div>
      </panel> -->

      <panel>
        <h3>{{ state.comments }}评论</h3>
        <el-divider />
        <PostComment v-model="comment" @submit="postComment"></PostComment>
        <el-divider />
        <Comment
          v-for="(item, index) in comments"
          :key="index"
          :data="item"
          @reply="handleReply"
        ></Comment>
      </panel>
      <template #right>
        <panel> right </panel>
      </template>
    </LCR>
  </div>
  <!-- <div class="replyComment">
    <div class="" style="width: 80%; margin: 0 auto">
      <LCR>
        <div class="" style="margin: 0 25px">
          <PostComment v-model="replyComment" @submit="postReplyComment"></PostComment>
        </div>
        <template #right></template>
      </LCR>
    </div>
  </div> -->
</template>

<script setup lang="ts">
import { getBlog, type Blog} from "@/api/blog";
import { addComment, type BlogComment } from "@/api/comments";

import { getBlogComments } from "@/api/comments";
import { onMounted, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import Panel from "@/components/Panel.vue";
import LCR from "@/layout/LCR.vue";

import PostComment from "./PostComment.vue";

import Comment from "./Comment.vue";

import Avatar from "@/components/Avatar.vue";
import { useUserStore } from "@/stores/user";
import { ElMessage } from "element-plus";

const route = useRoute();

const state = ref<Blog>({
  id: "",
  title: "", // 标题
  content: "", // 内容
  updateTime: "", // 更新时间
  comments: 0, // 评论数
  user: {},
});

const comments = ref<any>([]);

// 发布评论
const comment = ref("");
const replyComment = ref("");

function postReplyComment(value: string) {

}

// 发表评论
function postComment(val: string) {
  console.log("postComment", val);
  const data = {
    blogId: state.value.id,
    content: val,
    userId: useUserStore().userInfo.userId,
    parentId: 0, // 一级评论
    answerId: 0
  };
  addComment(data)
    .then((res) => {
      ElMessage.success('发表成功')
      loadComments(data.blogId)
      console.log(res);
    })
    .catch((err) => {
      console.log(err);
    });
}

// 回复评论
function handleReply(option:any) {
  console.log("handleReply", option);
  const {blogId, content, userId, parentId, answerId, ack} = option;

  const data = {
    blogId: blogId,
    content: content,
    userId: useUserStore().userInfo.userId,
    parentId: parentId, // 一级评论
    answerId: answerId
  };
  addComment(data)
    .then((res) => {
      ElMessage.success('发表成功')
      loadComments(data.blogId)
      ack()
    })
    .catch((err) => {
      console.log(err);
    });

}

watch(
  () => comment,
  (val) => {
    console.log(val);
  }
);

function loadComments(id) {
  getBlogComments(id).then((res) => {
    comments.value = res.data;
  });
}

onMounted(() => {
  const id = <string>route.params.id;
  getBlog(id).then((res) => {
    state.value = res.data;
  });

  loadComments(id)


});
</script>

<style scoped lang="less">
.replyComment {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0rem;
  width: 100%;
  min-width: 768px;
  margin: 0 auto;
  background: #fff;
  padding: 10px;
  box-shadow: var(--box-shadow);
}
.blog-wrapper {
  width: 80%;
  min-width: 768px;
  margin: 0 auto;
}

.userinfo-bar {
  display: flex;
  align-items: center;

  .item {
    display: flex;
    align-items: center;
  }
  .item > * {
    margin-right: 5px;
  }

  & > * {
    margin-right: 10px;
  }
  // justify-content: space-between;
}

.cursor {
  cursor: pointer;
}

.option-bar {
  display: flex;

  .option {
    padding: 0 5px;
    margin-right: 10px;
    cursor: pointer;
    &:hover {
      color: var(--app-main-color);
    }
  }
}
</style>
